
<template>
  <div class="drawerBox">
    <el-drawer v-model="drawerData.open" v-if="drawerData.open">
      <template #header>
        <div style="width: 100%">{{ drawerData.title }}</div>
      </template>
      <template #default>
        <div class="demo-image__lazy">
          <div class="title">题目图片</div>
          <!-- {{url.baseUrl + 'uploadPath/' + imgTopic}} -->
          <el-image
      
            :src="url.baseUrl + '/uploadPath/question/' + imgTopic"
            lazy
          />
          <div class="title">答案图片</div>
          <!-- {{imginfo}} -->
          <el-image
            v-for="urls in imginfo"
            :key="urls"
            :src="url.baseUrl + 'uploadPath/' + urls.filePath"
            lazy
          />
        </div>
        <div class="title">导师评语</div>
        <el-form
          :model="form"
          label-width="120px"
          :rules="formRules"
          ref="forms"
          class="formBox"
        >
          <el-form-item label="答题结果：" prop="status">
            <el-input
              v-model="form.status"
              placeholder="请输入答题结果"
              allow-caear
            />
          </el-form-item>
          <el-form-item label="评语图片：" class="typeUpload" prop="file">
                   <el-upload
                   v-model:file-list="file"
    ref="upload"
    class="upload-demo"
 
    :limit="1"
    :auto-upload='false'
                 :action="uploadAction"
                :show-file-list="true"
                :on-change="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
  >
    <template #trigger>
      <el-button   class="mainBtn">
        上传文件
      </el-button>
    </template>
   

  </el-upload>
          </el-form-item>
          <el-form-item label="评语：" prop="remarks">
            <el-input
              v-model="form.remarks"
              type="textarea"
              placeholder="请输入"
            />
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button
            class="secondBtn"
            @click="resetForm(forms), (drawerData.open = false)"
            >返回</el-button
          >
          <el-button class="mainBtn" @click="submitForm(forms)">保存</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>


<script  setup>
import { ref, watch, defineEmits,inject } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { resultTopic, resultInfo,resultSave } from "../../../api/index";
const emit = defineEmits(["getLists"]);
const url = inject("baseUrl");



const drawerData = ref({
  open: false,
  title: "",
});
// timu
const questionId = ref("");
const id = ref("");

const userId = ref("");

//
// 表单
//

//校验规则
const formRules = ref({
  status: [
    {
      required: true,
      message: "请输入答题结果",
      trigger: "blur",
    },
  ],

  remarks: [
    { required: true, message: "请输入评语", trigger: "blur" },
    {
      min: 0,
      max: 200,
      message: "评语长度不能超过200个字符",
      trigger: "blur",
    },
  ],
  file: [{ required: true, message: "请上传照片", trigger: "change" }],
});
const forms = ref(null);
let form = ref({
  id: "",
  status: "",
  remarks: "",
  file: [],
});

watch(
  drawerData.value,
  (newValue, oldValue) => {
    if (drawerData.value.open == true && forms.value) {
      resetForm(forms.value);
    }
  },
  { deep: true, immediate: true }
);
const imgTopic = ref("");
const getTopic = (id) => {
  let data = {
    qid: id,
  };
  resultTopic(data).then((res) => {
    if (res.code == 200) {
      imgTopic.value = res.data.filePath;
    }
  });
};
const imginfo = ref([]);
const getInfo = (data) => {
  resultInfo(data).then((res) => {
    if (res.code == 200) {
      imginfo.value = res.data.imgs;
    }
  });
};

// 图片

const uploadAction = ref(
  url.baseUrl +"answer/audit"
);
const filePath = ref('')
const handleAvatarSuccess = (response, uploadFile) => {
  console.log(response,uploadFile[0]);
  form.value.file=response.raw
  // console.log(response.raw);
  
};
const beforeAvatarUpload = (rawFile) => {
  console.log(rawFile,13);
  
  if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
    ElMessage.error("支持jpeg，png!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("最大 2MB!");
    return false;
  }

  return true;
};

//表单保存
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      let data = new FormData()
      data.append("file",form.value.file)
  data.append("id",form.value.id)
    data.append("status",form.value.status)
      data.append("remarks",form.value.remarks)
      resultSave(data).then((res) => {
        if (res.code == 200) {
          emit("getLists", res);
          ElMessage.success("保存成功");
          drawerData.value.open = false;
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};

defineExpose({ drawerData, form, getTopic, getInfo });
</script>


<style lang="scss" scoped>
.drawerBox {
  :deep(.el-drawer .el-drawer__body) {
    padding: 16px;
    .el-form-item {
      .el-form-item__label {
        font-size: 14px;
        font-family: MicrosoftYaHei;
        color: #999999;
        padding: 0px;
        margin-right: 8px;
      }
      .el-form-item__content {
        .el-input {
          width: 280px;
        }
      }
    }
  }
}

// 上传
// .typeUpload :deep(.el-form-item__content) {
//   flex-wrap: inherit !important;
//   align-items: flex-end !important;

//   div:first-child {
//     margin-right: 8px;

//     .el-upload--picture-card {
//       background-color: #ffffff;
//     }
//   }

//   .imgtext {
//     font-size: 14px;
//     font-family: MicrosoftYaHei;
//     color: #999999;
//     line-height: 24px;
//   }
//   .avatar {
//     width: 146px;
//     height: 146px;
//     border: 1px dashed transparent;
//   }

//   .el-upload {
//     border: 1px dashed #ebebeb;
//     border-radius: 6px;
//     width: 146px;
//     height: 146px;
//     display: flex;
//     justify-content: center;
//     align-items: center;
//   }
// }

// 单选
:deep(.el-radio-group) {
  .el-radio__label {
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #333333 !important;
  }
  .el-radio__input.is-checked .el-radio__inner {
    border-color: #3370ff;
    background: #3370ff;
  }
}

// 多选
:deep(.el-checkbox-group) {
  .el-checkbox__input.is-checked .el-checkbox__inner {
    border-color: #3370ff;
    background: #3370ff;
  }
  .el-checkbox__label {
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #333333 !important;
  }
}

.demo-image__lazy {
  height: 400px;
  overflow-y: auto;
}
.demo-image__lazy .el-image {
  display: block;
  min-height: 200px;
  margin-bottom: 10px;
}
.demo-image__lazy .el-image:last-child {
  margin-bottom: 0;
}
.title{
      font-size: 16px;
    font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
    font-weight: bold;
    color: #333333;
    margin-bottom: 16px;
    padding-top: 16px;
}
:deep(.el-upload-list__item){
  width: 350px;
}
</style>



